<template>
	<view class="">
		<view class="cander-box bg-white">

			<view class="head-box  flex  align-center  ">
				<view class="td text-center " v-for="(item,index) in thead" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="tr flex  align-center" v-for="(time,i) in dateData" :key="i">
				<view class="td text-center middle " v-for="(time,k) in time" :key="k">
				
					<view v-if="time.status!=0" :class="current.day==time.num?'bg-red':''" class="day-style1 ">{{time.num}}</view>
				</view>

			</view>

		</view>



	</view>
</template>

<script>
	export default {
		name:"cander",
		data() {
			return {
				monthDay: [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
				thead: [{
						"id": "1",
						"name": "一"
					},
					{
						"id": "2",
						"name": "二"
					},
					{
						"id": "3",
						"name": "三"
					},
					{
						"id": "4",
						"name": "四"
					},
					{
						"id": "5",
						"name": "五"
					},
					{
						"id": "6",
						"name": "六"
					},
					{
						"id": "7",
						"name": "七"
					},
				], //定义表格头部数据
				dateData: [], //时间存储变量
				current:{
					day:"",
				}

			}
		},
		mounted() {
			//创建日历
			
			this.create();


		},
		methods: {
			getCountDays() {
				let curDate = new Date();
				let curMonth = curDate.getMonth();
				curDate.setMonth(curMonth + 1);
				curDate.setDate(0);
				return curDate.getDate();
			},
			create() {
				let time = new Date();
				let month = time.getMonth() + 1;
				let year = time.getFullYear();
				let day = time.getDate();
				let days = this.getCountDays();
				let current=this.whatDay(year,month,10);
				let firstDay=this.whatDay(year,month,1);
				console.log("year " + year + " month " + month + " day " + day+" days "+days+" current "+current);
				let d=1,status=0,num=0;
				this.current.day=day;
				for (let i=0;i<5;i++) {
					let arr=[];
					for (let j=0;j<7;j++) {
						d++;
						(d>firstDay && num<=days)?(()=>{
							status=1;
							num++;
							if(num>days){
								status=0;
							}
						})():"";
						arr.push({num:num,status:status});
					}
					this.dateData.push(arr);
				}
			},
			/**
			 * 判断某年是否是闰年
			 * @param year年
			 *
			 */
			isLeap(year) {
				if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
					return true;
				} else {
					return false;
				}
			},
			/**
			 * 判断某年某月某日是星期几，默认日为0
			 * @param year
			 * @param month
			 * @param day
			 * @returns {number}
			 */
			whatDay(year, month, day = 0) {
				let sum = 0;
				sum += (year - 1) * 365 + Math.floor((year - 1) / 4) - Math.floor((year - 1) / 100) + Math.floor((year -
					1) / 400) + day;
				for (let i = 0; i < month - 1; i++) {
					sum += this.monthDay[i];
				}
				if (month > 2) {
					if (this.isLeap(year)) {
						sum += 29;
					} else {
						sum += 28;
					}
				}
				return sum % 7; //余数为0代表那天是周日，为1代表是周一，以此类推
			}


		}


	}
</script>

<style scoped>
	.cander-box {
		width: 100%;
		min-height: 50rpx;
	}

	.head-box,
	.tr {
		width: 100%;
		padding-right: 10rpx;
		padding-left: 10rpx;
		flex-wrap: nowrap;

	}

	.td {
		width: 100%;
	
	}
	
	.day-style1{
			padding: 5rpx;
		border-radius: 50%;
	}
</style>

<style lang="scss">
	$tableH:60upx;


	.head-box,
	.tr {
		height: $tableH;
	}

	.td {}
</style>
